
import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const DetailPanelMeta: IPublicTypeComponentMetadata = {
  componentName: "DetailPanel",
  title: "详情面板",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "hzdz-charts",
    version: "0.1.0",
    exportName: "DetailPanel",
    main: "src/index.tsx",
    destructuring: true,
    subName: ""
  },
  configure: {
    props: [
      {
        name: 'title',
        title: '标题',
        setter: {
          componentName: 'StringSetter',
          props: {
            placeholder: '请输入标题'
          }
        }
      },
      {
        name: 'content',
        title: '内容',
        setter: {
          componentName: 'SlotSetter',
          props: {
            mode: 'node'
          }
        }
      },
      {
        name: 'visible',
        title: '是否显示',
        setter: {
          componentName: 'BoolSetter',
          props: {
            defaultValue: true
          }
        }
      },
      {
        name: 'width',
        title: '宽度',
        setter: {
          componentName: 'NumberSetter',
          props: {
            placeholder: '请输入宽度',
            defaultValue: 400
          }
        }
      },
      {
        name: 'height',
        title: '高度',
        setter: {
          componentName: 'StringSetter',
          props: {
            placeholder: 'auto',
            defaultValue: 'auto'
          }
        }
      },
      {
        name: 'onClose',
        title: '关闭回调',
        setter: {
          componentName: 'FunctionSetter',
          props: {
            placeholder: '() => { this.setState({ visible: false }) }'
          }
        }
      }
    ],
    supports: {
      style: true,
      events: ['onClose']
    },
    component: {
      isContainer: true,
      nestingRule: {
        childWhitelist: ['*', 'ColorfulButton', 'div', 'span', 'p', 'button', 'input', 'textarea', 'select', 'table', 'tr', 'td', 'th', 'ul', 'li', 'ol', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
        descendantWhitelist: ['*']
      }
    }
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: "详情面板",
    screenshot: "",
    schema: {
      componentName: "DetailPanel",
      props: {
        title: "详情面板",
        visible: true,
        width: 400,
        height: 'auto',
        onClose: '() => { this.setState({ visible: false }) }'
      },
      children: [
        {
          componentName: 'div',
          props: {
            style: {
              padding: '16px'
            }
          },
          children: '这里是详情面板的内容'
        }
      ]
    }
  },
];

export default {
  ...DetailPanelMeta,
  snippets
};
